<template>
  <view class="seat-container">
    <view class="screen text-sm">{{ movieTitle }}屏幕</view>
    <view class="seat-wrap">
      <view v-for="(row, index) in seatRows" :key="index" class="seat-row">
        <view
          v-for="(seat, seatIndex) in row"
          :key="seatIndex"
          :class="['seat-item', seat.isSale === 'available' ? 'available' : seat.isSelected?'select':'unavailable']"
          @click="selectSeat(seat)"
        >
		 <i  :class="['iconfont','text-xl',seat.isSelected? 'icon-yixuanzuowei' : 'icon-zuowei']"></i>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    rows: {
      type: Number,
      default: 10
    },
    columns: {
      type: Number,
      default: 10
    },
    soldSeats: {
      type: Array,
      default: function() {
        return []
      }
    },
    selectedSeats: {
      type: Array,
      default: ()=>[]
    },
    movieTitle: {
      type: String,
      default: "影厅"
    }
  },
  computed: {
    seatRows() {
		//转二维数组
      let rows = [];
	  let count = 0;
      for (let i = 0; i <this.columns; i++) {
        let row = []
        for (let j = 0; j < this.rows ; j++) {
          let seatNumber = this.soldSeats[i*this.rows+j]?.seatId;
          let isSale =  this.soldSeats[i*this.rows+j]?.isSale ? 'available':'unavailable';
          let isSelected = this.selectedSeats.indexOf(this.soldSeats[i*this.rows+j]?.seatId)>-1;
		  //判断通过才添加
		  if(count==this.soldSeats.length) break;
          row.push({
            row: i+1,
			colum:j+1,
            seatNumber,
            isSale,
            isSelected
          })
		  count++;
        }
		rows.push(row)
      }
      return rows
    }
  },
  methods: {
    selectSeat(seat) {
		console.log(seat);
      if (seat.isSale === "available") {
        return
      }
	  //修改选框
      seat.isSelected = !seat.isSelected
      let selectedSeats = [];
	  let arrCoordinates= [];
      this.seatRows.forEach(row => {
        row.forEach(item => {
          if (item.isSelected) {
            selectedSeats.push(item.seatNumber)
			arrCoordinates.push({row:item.row,colum:item.colum})
          }
        })
      })
      this.$emit("selectSeat", selectedSeats,arrCoordinates);
    }
  }
}
</script>

<style>
.seat-container {
  position: relative;
  margin: 30upx auto;
  width: 100%;
  max-width: 600px;
  text-align: center;
}

.screen {
  position: absolute;
  top:-40upx ;
  left: 0;
  right: 0;
  width: 40%;
  margin: auto;
  padding: 10px ;
  background-color: #fff;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
}

.seat-wrap {
  display: inline-block;
  margin-top: 60px;
}

.seat-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.seat-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  font-size: 12px;
  color: #666;
  border-radius: 5px;
  cursor: pointer;
}
.select{
	background-color: #69ba00;
}
.available {
  background-color: #ff0000;
}

.unavailable {
  background-color: #f5f5f5;
}
</style>